<template>
  <div class="loginview">
    <div class="login-box">
        <div class="imgbox">
            <img src="img/login.png" alt="">
        </div>
        <div class="rightbox">
            <h2>欢迎使用后台管理</h2>
            <div class="login">
                <el-input v-model="username" placeholder="请输入用户名"></el-input>
                <el-input v-model="password" placeholder="请输入密码"></el-input>
                <el-button type="primary" @click="loginFn">登录</el-button>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            username:"",
            password:"",
        }
    },
    methods:{
        async loginFn(){
            // console.log(this.username)
            let obj={
                username:this.username,
                password:this.password,
            }
            let res=await this.$http.getLogin(obj)
            // console.log(res)
            this.$store.commit('setLogin',res.data.data.token)
            this.$router.push('/about/home')
        }
    }
}
</script>

<style lang="scss">
    .loginview{
        width:100%;
        height:100vh;
        display:flex;
        justify-content: center;
        align-items:center;
        background-image:url('../../../public/img/bg-login.png');
        background-repeat: no-repeat;
        background-size:100% 100%;
        .login-box{
            width:800px;
            height:460px;
            border-radius:10px;
            background:#fff;
            display: flex;
            justify-content: space-between;
            .imgbox{
                width:480px;
                height:460px;
                display:flex;
                justify-content: center;
                align-items: center;
                img{
                    width:400px;
                }
            }
            .rightbox{
                box-sizing: border-box;
                padding-top: 50px;
                width: 320px;
                text-align: center;
                h2{
                    margin:20px 0;
                }
                .login{
                    width:280px;
                    margin:0 auto;
                    .el-input{
                        margin-bottom:22px;
                    }
                    .el-button{
                        width:100%;
                    }
                }
            }
        }
    }
</style>